(function($, XDE) {
	class XbzGrid4Col {
		// 构造方法
		constructor() {
			this.defaultFields = {
				id: "",
				pid: "0",
				tag: "grid4col",
				drag: 0,
				childs: []
			};
		}

		// 构建Node
		buildNode(node, isNew) {
			if (XDE.util.isNull(node)) {
				node = {};
			}

			// 深拷贝
			$.extend(true, node, this.defaultFields);

			// 新节点
			if (isNew === true || XDE.util.isNull(node.id)) {
				node.id = XDE.util.uuid();
			}

			// 子节点
			for (var i = 0; i < node.childs.length; i++) {
				var childNode = node.childs[i];
				var childAss = XDE.ass.get(childNode.tag);
				childNode = childAss.buildNode(childNode, isNew);
				childNode.pid = node.id;
			}

			return node;
		};

		// 创建元素
		createElement(node) {
			// 构建Node
			node = this.buildNode(node);

			// 创建元素
			var element = document.createElement("div");
			element.setAttribute("class", "layui-col-md3 XbzDesignerChildContainer");
			element.setAttribute("x-id", node.id);
			element.setAttribute("x-tag", node.tag);
			element.setAttribute("x-drag", node.drag);

			// 创建子元素
			for (var i = 0; i < node.childs.length; i++) {
				// 子节点信息
				var childNode = node.childs[i];
				var childAss = XDE.ass.get(childNode.tag);

				// 创建子节点并返回子节点信息
				var result = childAss.createElement(childNode);
				element.appendChild(result.element);
				childNode = result.node;
				childNode.pid = node.id;
				node.childs[i] = childNode;
			}

			// 返回结果
			return {
				node: node,
				element: element
			};
		};
	}

	class XbzGrid4 {
		// 构造方法
		constructor() {
			this.defaultFields = {
				id: "",
				pid: "0",
				tag: "grid4",
				drag: 1,
				childs: []
			};
		}

		// 构建Node
		buildNode(node, isNew) {
			// 判空并构建
			if (XDE.util.isNull(node)) {
				node = {};
			}

			// 深拷贝
			$.extend(true, node, this.defaultFields);

			// 新节点
			if (isNew === true || XDE.util.isNull(node.id)) {
				node.id = XDE.util.uuid();
			}

			// 子节点（只有两个）
			var childAss = XDE.ass.get("grid4col");
			for (var i = 0; i < 4; i++) {
				if (node.childs.length > i) {
					var childNode = node.childs[i];
					childNode = childAss.buildNode(childNode, isNew);
					childNode.pid = node.id;
					node.childs[i] = childNode;
				} else {
					var childNode = childAss.buildNode(null, isNew);
					childNode.pid = node.id;
					node.childs.push(childNode);
				}
			}

			return node;
		};

		// 创建元素
		createElement(node) {
			// 构建Node
			node = this.buildNode(node);

			// 创建元素
			var element = document.createElement("div");
			element.setAttribute("class", "layui-row XbzDesignerGridRow");
			element.setAttribute("x-id", node.id);
			element.setAttribute("x-tag", node.tag);
			element.setAttribute("x-drag", node.drag);

			// 创建子元素
			for (var i = 0; i < node.childs.length; i++) {
				// 子节点信息
				var childNode = node.childs[i];
				var childAss = XDE.ass.get(childNode.tag);

				// 创建子节点并返回子节点信息
				var result = childAss.createElement(childNode);
				element.appendChild(result.element);
				childNode = result.node;
				childNode.pid = node.id;
				node.childs[i] = childNode;
			}

			// 返回结果
			return {
				node: node,
				element: element
			};
		};
	}

	// 注册组件
	XDE.ass.put("grid4col", new XbzGrid4Col());
	XDE.ass.put("grid4", new XbzGrid4());
})(XbzDesigner.$, XbzDesigner);
